
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>DashBoard</title>
    <!--引入js-->
    <script src="/js/socket.io.js"></script>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/highcharts.js"></script>
    <script src="/js/exporting.js"></script>
    <script type="text/javascript">
        // 用于存储女性count总和
        var femaleCountSum = 0;
        // 用于存储男性count总和
        var maleCountSum = 0;

        // 连接
        var socket = io.connect('127.0.0.1:7777');

        socket.on('stumsg', function (message) {
            console.log("柳炎炎")
            console.log(message);
            var dataArray = message.split(':');
            console.log(dataArray);
            var data=dataArray[1].split(',')
            var maleCount = 0;
            var femaleCount = 0;
            if (data.length === 2) {
                if (data[0] ==='male') {
                    maleCount = parseInt(data[1]);
                } else if (data[0] === 'female') {
                    femaleCount = parseInt(data[1]);
                }
            }
            // 累加女性 count 总和
            if (femaleCount >= 0) {
                femaleCountSum += femaleCount;
            }
            // 累加男性 count 总和
            if (maleCount >= 0) {
                maleCountSum += maleCount;
            }
        });
        window.onload = function () {

            Highcharts.setOptions({
                global: {
                    // 设置时间，使用本地时间
                    useUTC: false
                }
            });

            // 设置Highcharts图标spline在#container中显示
            var chart = Highcharts.chart('container', {
                chart: {
                    // 带标记曲线图
                    type: 'spline',
                    animation: Highcharts.svg,
                    marginRight: 10,
                    events: {
                        // 加载事件
                        load: function () {
                            // 获取女生数据
                            var series1 = this.series[0];
                            // 获取男生数据
                            var series2 = this.series[1];

                            // 定时器，每两秒执行一次
                            setInterval(function () {

                                var x = (new Date()).getTime();

                                // 处理女性数据
                                series1.addPoint([x, femaleCountSum], true, true);

                                // 处理男性数据
                                series2.addPoint([x, maleCountSum], true, true);
                            }, 2000);
                        }
                    }
                },
                title: {
                    text: '男女生人数实时分析'
                },
                xAxis: {
                    type: 'datetime',
                    tickPixelInterval: 50
                },
                yAxis: {
                    title: {
                        text: '数量'
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }],
                    allowDecimals: false
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            Highcharts.dateFormat('%Y - m - d %H:%M:%S', this.x) + '<br/>' +
                            Highcharts.numberFormat(this.y, 0);
                    }
                },
                legend: {
                    enabled: true
                },
                exporting: {
                    enabled: true
                },
                series: [{
                    name: '女生人数',
                    data: (function () {
                        // 生成一个长度为20，值为随机数的数组，作为初始数据显示
                        var data = [],
                            time = (new Date()).getTime(),
                            i;
                        for (i = - 19; i <= 0; i += 1) {
                            data.push({
                                x: time + i * 1000,
                                y: Math.random()
                            });
                        }
                        return data;
                    }())
                },
                    {
                        name: '男生人数',
                        data: (function () {

                            var data = [],
                                time = (new Date()).getTime(),
                                i;

                            for (i = - 19; i <= 0; i += 1) {
                                data.push({
                                    x: time + i * 1000,
                                    y: Math.random()
                                });
                            }
                            return data;
                        }())
                    }]
            });
        };
    </script>
</head>

<body>
<div id="container" style="width: 100%;height: 100%;margin: 0 auto"></div>
</body>

</html>
